<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        :root {
            /* border-radius */
            --gl-border-radius-small: 0.4rem;
            /* colors */
            --gl-color-black-100: #000000;
            --gl-color-blue-100: #009DE9;
            --gl-color-gray-100: #A8ABAF;
            --gl-color-gray-200: #e8e8e8;
            --gl-color-white-100: #ffffff;
            /* font-family */
            --gl-font-family-base: Arial, Helvetica, sans-serif;
        }
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        html, body {
            height: 100%;
            background-color: var(--gl-color-black-100);
        }
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font: 13px var(--gl-font-family-base);
        }
        .gl-title {
            margin: 1rem 0;
            font: 28px var(--gl-font-family-base);
            color: var(--gl-color-white-100);
            text-decoration: none;
            text-transform:uppercase;
        }
        .gl-subtitle {
            margin: 0 0 1rem 0;
            font: 20px Arial, Helvetica, sans-serif;
            color: var(--gl-color-black-100);
            text-transform: uppercase;
        }
        .gl-login {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        .gl-box {
            padding: 3.75rem 2.5rem;
            width: 375px;
            border-radius: var(--gl-border-radius-small);
            background-color: var(--gl-color-white-100);
        }
        .gl-form {
            display: flex;
            flex-direction: column;
        }
        .gl-label {
            margin: 0.5rem 0;
            font-weight: 800;
            color: var(--gl-color-gray-100);
        }
        .gl-input {
            height: 45px;
            padding: 0 0 0 0.9rem;
            border: 0.06rem solid var(--gl-color-gray-200);
            border-radius: var(--gl-border-radius-small);
        }
        .gl-input:focus {
            border: 0.13rem solid var(--gl-color-blue-100);
            outline: none;
        }
        .gl-input::placeholder {
            color: var(--gl-color-gray-100);
        }
        .gl-input--btn {
            margin: 0.5rem 0;
            border: none;
            background-color: var(--gl-color-blue-100);
            color: var(--gl-color-white-100);
            text-transform: uppercase;
            transition:
                background-color 300ms ease,
                color 300ms ease
            ;
        }
        .gl-input--btn:hover {
            background-color: var(--gl-color-black-100);
            color: var(--gl-color-white-100);
        }
    </style>
</head>
<body>
    <section class="gl-login">
        <a class="gl-title" href="/">GLSL Sandbox</a>
        <div class="gl-box">
            <h3 class="gl-subtitle">Login</h3>
            <form class="gl-form" action="/login" method="POST">
                <label class="gl-label" for="name">Username</label>
                <input class="gl-input" type="text" id="name" name="name" placeholder="Enter your username"/><br/>
                <label class="gl-label" for="password">Password</label>
                <input class="gl-input" type="password" id="password" name="password" placeholder="Enter your password"/><br/>
                <input class="gl-input gl-input--btn" type="submit" value="Submit"/>
            </form>
        </div>
    </section>
</body>
</html>
